<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
        }
        #box{
            padding-left: 10px;
            width: 100px;
            height: 100px;
            background-color: gray;
            position: absolute;
            position: relative;
        }
        #press a{
            background-color: #000;
            color: honeydew;
            position: absolute;
            bottom: 0px;
        }
    </style>
</head>
<body>
    <div id="box">
        <p id="press"><a href="#" class="ret">拖拽回放</a><br><span id="record"></span></p>
    </div>
    



    <script>

            // 获取元素
            var pre = document.querySelector('.ret')
            // 定义一个数组包对象用来记录
            var pos = [{x:box.offsetLeft},{y:box.offsetTop}]
            // 定义一个布尔值用来判断是否进行拖拽
            var drg = false
            // 初始值
            var mouX = mouY = 0
            // 给盒子添加鼠标按下时间
        box.onmousedown = function(e){
            e = e || window.event
            // 鼠标想对于box边框的距离
            mouX = e.clientX - box.offsetLeft
            mouY = e.clientY - box.offsetTop
            // 为真进行拖拽
            drg = true
            // 记录
            pos.push({x:box.offsetLeft,y:box.offsetTop})
            // 不拖拽
            return false
        }
        // 添加鼠标移动事件
        document.onmousemove = function(e){
            // 不拖拽直接return
            if(!drg){
                return
            }
                e = e || window.event
                // div相对于网页的距离
                var nowX = e.clientX - mouX
                var nowY= e.clientY - mouY
                // 拖拽盒子跟着鼠标走
                box.style.left = nowX + 'px'
                box.style.top = nowY + 'px'
                // 记录
                pos.push({x:nowX,y:nowY})
                // 记录值放进盒子
                record.innerHTML = 'X:'+nowX+'Y:'+nowY
                // 完成拖拽
                return false
            }
    
        
            document.onmouseup = function(){
            // 停止拖拽
            drg =false
            // 记录盒子位置放进record
            record.innerHTML = 'X:'+box.offsetLeft+'Y:'+box.offsetTop
       } 
    //    添加点击事件用来回放
        pre.onclick = function(){
            // 如果没拖拽就没有回放
           if(pos.length == 1){
               return
           }
            // 设置定时器
            var timer = setInterval(function(){
                // 删掉pos数组最后一个值如果为空就取消定时器没有回放，如果不为空就有回放
                var oPos = pos.pop()
                 
                oPos ? (box.style.left = oPos.x + 'px',box.style.top = oPos.y + 'px') : clearInterval(timer)
                
            },30)
            return false
        }
    </script>
</body>
</html>